{% extends "base.html" %}

{% block content %}
<div class="card">
    <div class="card-header">
        <h3 class="card-title mb-0">
            <i class="bi bi-pencil-square me-2"></i>编辑用户
        </h3>
    </div>
    <div class="card-body">
        <form method="POST" class="needs-validation" novalidate>
            <div class="mb-4">
                <label for="username" class="form-label">
                    <i class="bi bi-person me-2"></i>用户名
                </label>
                <input type="text" 
                       class="form-control" 
                       id="username" 
                       name="username" 
                       value="{{ user.username }}"
                       required 
                       pattern="^[a-zA-Z0-9_-]{3,16}$"
                       minlength="3"
                       maxlength="16">
                <div class="form-text text-muted">
                    用户名长度为3-16个字符，只能包含字母、数字、下划线和连字符
                </div>
                <div class="invalid-feedback">
                    请输入有效的用户名
                </div>
            </div>
            
            <div class="mb-4">
                <label for="email" class="form-label">
                    <i class="bi bi-envelope me-2"></i>邮箱
                </label>
                <input type="email" 
                       class="form-control" 
                       id="email" 
                       name="email" 
                       value="{{ user.email }}"
                       required>
                <div class="invalid-feedback">
                    请输入有效的邮箱地址
                </div>
            </div>

            <div class="d-flex gap-2">
                <button type="submit" class="btn btn-primary">
                    <i class="bi bi-check-circle me-2"></i>保存修改
                </button>
                <a href="{{ url_for('index') }}" class="btn btn-outline-secondary">
                    <i class="bi bi-arrow-left me-2"></i>返回列表
                </a>
            </div>
        </form>
    </div>
</div>

<script>
// 表单验证
(function () {
    'use strict'
    var forms = document.querySelectorAll('.needs-validation')
    Array.prototype.slice.call(forms).forEach(function (form) {
        form.addEventListener('submit', function (event) {
            if (!form.checkValidity()) {
                event.preventDefault()
                event.stopPropagation()
            }
            form.classList.add('was-validated')
        }, false)
    })
})()
</script>
{% endblock %}